import React from 'react';
import './town.scss';
import { api } from 'js/api/api';
import { userData } from 'js/core/userData';
import { browserHistory } from 'react-router';
import { panelPop } from 'views/modal/panelPop/panelPop';
import PetMarket from './component/petMarket';
import PropMarket from './component/propMarket';
// import Pub from './component/pub';

class Main extends React.Component {
    constructor() {
        super()
    }
    changeMap = (mapType) => {
        api('changeMap', { mapType: mapType }, (err, data) => {
            if (data && data.log) {
                window.eventHandle.emit('log', data.log);
            }
            this.setState({})
            browserHistory.push('/maze')
        })
    }
    showPet = () => {
        panelPop.show(<PetMarket />)
    }
    showPropMarket = () => {
        panelPop.show(<PropMarket />)
    }
    showPub = () => {
        // panelPop.showMainBody(<Pub />)
    }
    showBag = () => {
        panelPop.showMain('bag');
    }
    render() {
        return (
            <div id="town">
                <div className="building flex-col-hcenter">
                    <div className="flex-vcenter shop" onClick={this.showPub}>
                        <div className="icon flex-center"><div className="fonts-pub"></div></div>
                        <div className="flex-g-1">酒馆</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop" onClick={this.showPropMarket}>
                        <div className="icon flex-center"><div className="fonts-shop"></div></div>
                        <div className="flex-g-1">杂物铺</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop">
                        <div className="shop-icon"></div>
                        <div className="flex-g-1">医疗所</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    <div className="flex-vcenter shop">
                        <div className="icon flex-center"><div className="fonts-shop"></div></div>
                        <div className="flex-g-1">铁匠铺</div>
                        <div className="flex-col-2 flex-center">
                            <div className="arrow"></div>
                        </div>
                    </div>
                    {/* <button>酒馆</button>
                    <button>医疗所</button>
                    <button>铁匠铺</button>
                    <button>药材坊</button> */}
                </div>
                <div className="town-bottom flex-center">
                    <div onClick={() => this.changeMap(5, '/maze')} className="flex-vcenter go">
                        <div className="go-left"></div>
                        <div className="go-name flex-g-1">出发</div>
                        <div className="fonts-send"></div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Main;